<template>
  <div>
    <Row class="mt10">
      <Card>
        <p slot="title">补考成绩报表</p>

        <Alert class="fb">共{{courseCount}}科目 共{{personTime}}人次</Alert>
        <div style="width:1000px;margin:0 auto;">
          <Table border :columns="columns" :data="data1"></Table>
        </div>
      </Card>
    </Row>
  </div>
</template>

<script>
import { relative } from "path";
export default {
  name: "",
  components: {
    // circleLoading
  },
  data() {
    function addrows(h, htmlArr) {
      var rowsArr = [];
      let height=40;
      for (let i = 0, len = htmlArr.length; i < len; i++) {
        // 如果不是最后一项
        if (i !== len - 1) {
          //不是一个时，添加opacity：0的项进行占位
          if (htmlArr[i].rows > 1) {
            for (let j = 0, len2 = htmlArr[i].rows; j < len2 - 1; j++) {
              rowsArr.push(
                h(
                  "div",
                  {
                    attrs: {
                      class: "rowspan__child colorWrite"
                    }
                  },
                  "~_~"
                )
              );
            }
          }
          //只有一个时
          // else {
          //   // 如果值为空时，比如备注，暂时不用了 2019-10-18 09:42:43
          //   if (htmlArr[i].val == "") {
          //     rowsArr.push(
          //       h(
          //         "div",
          //         {
          //           attrs: {
          //             class: "rowspan__child blank"
          //           }
          //         },
          //         "~_~!"
          //       )
          //     );
          //   }
          // }
          //带下横线
          rowsArr.push(
            h(
              "div",
              {
                attrs: {
                  class: "rowspan__child rowspan__child--border"
                }
              },
              [
                h(
                  "span",
                  {
                    style: {
                      top: -((htmlArr[i].rows * height) / 2 - height/2) + "px"
                    }
                  },
                  // htmlArr[i].val
                  [h("div", htmlArr[i].val[0]),h("div", htmlArr[i].val[1]),h("div", htmlArr[i].val[2])]
                )
              ]
            )
          );
          // 最后一项不加下横线
        } else {
          //不是一个时，添加opacity：0的项进行占位
          if (htmlArr[i].rows > 1) {
            for (let j =0, len2 = htmlArr[i].rows; j < len2 - 1; j++) {
              rowsArr.push(
                h(
                  "div",
                  {
                    attrs: {
                      class: "rowspan__child colorWrite"
                    }
                  },
                  "~_~"
                )
              );
            }
            rowsArr.push(
              h(
                "div",
                {
                  attrs: {
                    class: "rowspan__child"
                  }
                },
                [
                  h(
                    "div",
                    {
                      style: {
                        top: -((htmlArr[i].rows * height) / 2 - height/2) + "px",
                        position: "relative"
                      }
                    },
                    // htmlArr[i].val
                    [h("div", htmlArr[i].val[0]),h("div", htmlArr[i].val[1]),h("div", htmlArr[i].val[2])]
                  )
                ]
              )
            );
          } else {
            rowsArr.push(
              h(
                "div",
                {
                  attrs: {
                    class: "rowspan__child"
                  }
                },
                [
                  h(
                    "span",
                    {
                      style: {
                        top: -((htmlArr[i].rows * height) / 2 - height/2) + "px"
                      }
                    },
                    // htmlArr[i].val
                    [h("div", htmlArr[i].val[0]),h("div", htmlArr[i].val[1]),h("div", htmlArr[i].val[2])]
                  )
                ]
              )
            );
          }
        }
      }
      return h(
        "div",
        {
          attrs: {
            class: "rowspan__parent"
          }
        },
        rowsArr
      );
    }
    return {
      data: [],
      data1: [
        /**
         * 数据格式说明：2019-12-24 10:51:54
         * rows 合并的行数，val是数组格式的数据，如果需要换行就把元素放到数组的不同项内，
         *    如["6月26日", "上午8:30-9:30", "教学楼北301"]，
         *    否则放到一项内即可，如 ["何惠茜  刘浩楠    路晔  张欣鑫"]
         * 每一项都是一个数组形式结构，每一项有一个属性val和rows
         * # 科目 couseName
         * # 班级 className 
         * # 学生名单 studentList ，多个学生时用空格隔开，放到一项内，如 ["何惠茜  刘浩楠    路晔  张欣鑫"]
         * # 监考教师 teacher ***rows是合并的行数-1***，
         *   另外不同的老师需要放在数组的不同项，如 ["王攀","高山"]，这样就可以实现换行显示
         * # 考试时间及地点 dateTime ***rows是合并的行数-1***，
         *   另外不同的老师需要放在数组的不同项，如 ["6月26日", "上午8:30-9:30", "教学楼北301"]，这样就可以实现换行显示
        */
        {
          couseName: [
            {
              val: ["航空服务英语综合(6人)"],
              rows: 2
            },
            {
              val: ["航空市场营销(3人)"],
              rows: 1
            },
            {
              val: ["民航服务心理学(2人)"],
              rows: 1
            },
            {
              val: ["民航服务心理学(2人)"],
              rows: 2
            },
            {
              val: ["民航货物运输实务(9人)"],
              rows: 2
            }
          ],
          className: [
            { val: ["2016级民航航空1"] },
            { val: ["2016级民航航空3"] },
            { val: ["2016级民航航空1"] },
            { val: ["2016级会计"] },
            { val: ["2016级民航航空1"] },
            { val: ["2016级民航航空3"] },
            { val: ["2016级民航航空1"] },
            { val: ["2016级民航航空3"] }
          ],
          studentList: [
            { val: ["赵浩天   方佳俊"] },
            { val: ["何惠茜  刘浩楠    路晔  张欣鑫"] },
            { val: ["田浩  黄洁  方佳俊"] },
            { val: ["陈龙"] },
            { val: ["张雨晨"] },
            { val: ["路晔"] },
            { val: ["田浩  方佳俊  赵梦林  张雨晨  邵彬"] },
            { val: ["张欣鑫  刘浩楠   路晔  何惠茜"] }
          ],

          teacher: [
            {
              val: ["王攀","高山"],
              rows: 7
            }
          ],
          dateTime: [
            {
              val: ["6月26日", "上午8:30-9:30", "教学楼北301"],
              rows: 7
            }
          ]
        },
        {
          couseName: [
            {
              val: ["英语口语(6人)"],
              rows: 2
            },
            {
              val: ["综合实训(14人)"],
              rows: 4
            }
          ],
          className: [
            { val: ["2016级轨道1"] },
            { val: ["2016级轨道3"] },
            { val: ["2016级轨道1"] },
            { val: ["2016级轨道2"] },
            { val: ["2016级轨道3"] },
            { val: ["2016级轨道4"] }
          ],
          studentList: [
            { val: ["杨万晨  云双跃"] },
            { val: ["洪靖叔  杜子铭  张凯旋  陈亚东"] },
            { val: ["韩坤  穆蕾融"] },
            { val: ["安铮  何宇"] },
            { val: ["洪靖叔  张凯旋  谢腾  李轩宇"] },
            { val: ["梁浩宇  宋鑫淼  关子豪  梁朝俊 梁浩宇  宋鑫淼"] }
          ],
          teacher: [
            {
              val: ["董晓净","张大伟"],
              rows: 5
            }
          ],
          dateTime: [
            {
              val: ["6月26日", "上午8:30-9:30", "教学楼北301"],
              rows: 5
            }
          ]
        },
        {
          couseName: [
            {
              val: ["英语口语(6人)"],
              rows: 2
            },
          ],
          className: [
            { val: ["2016级轨道1"] },
            { val: ["2016级轨道3"] },
          ],
          studentList: [
            { val: ["杨万晨  云双跃"] },
            { val: ["洪靖叔  杜子铭  张凯旋  陈亚东"] },
            
          ],
          teacher: [
            {
              val: ["董晓净","张大伟"],
              rows: 1
            }
          ],
          dateTime: [
            {
              val: ["6月26日", "上午8:30-9:30", "教学楼北301"],
              rows:1
            }
          ]
        },
        {
          couseName: [
            {
              val: ["英语口语(6人)"],
              rows: 1
            },
          ],
          className: [
            { val: ["2016级轨道1"] },
          ],
          studentList: [
            { val: ["洪靖叔  杜子铭  张凯旋  陈亚东"] },
            
          ],
          teacher: [
            {
              val: ["董晓净","张大伟"],
              rows: 1
            }
          ],
          dateTime: [
            {
              val: ["6月26日", "上午8:30-9:30", "教学楼北301"],
              rows:1
            }
          ]
        },
      ],
      courseCount: "4", //科目数量
      personTime: "4", //人次
      grades: [], //年度
      annualList: [], //年度
      semesterList: [], //学期
      classList: [],
      searchForm: {
        // 搜索框初始化对象
      },
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 60,
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        },
        {
          title: "科目",
          key: "couseName",
          align: "center",
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        },
        {
          title: "班级",
          key: "className",
          align: "center",
          minWidth: 80,
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        },
        {
          title: "学生名单",
          key: "studentList",
          align: "center",
          width: 260,
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        },
        {
          title: "监考老师",
          key: "teacher",
          align: "center",
          width: 60,
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        },
        {
          title: "考试时间及地点",
          key: "dateTime",
          align: "center",
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        }
      ]
    };
  },
  mounted() {},
  methods: {}
};
</script>
<style lang="less">
@minHeight:48px;
.rowspan__parent {
  margin: 0 -20px;
  width: 100%;
  height: 100%;
  // border:1px solid #f00;
}

.rowspan__child {
  padding: 5px 10px;
  min-height: @minHeight;
  display: flex;
  align-items: center;
  // text-align: left;
}
.rowspan__child span {
  text-align: left;
}
.rowspan__child--border {
  border-bottom: 1px solid #e8eaec;
}
//隐藏占位符
.colorWrite {
  opacity: 0;
  // color:#f00;
}
.blank {
  opacity: 1;
  min-height: @minHeight;
  padding: 0;
}
.colorWrite + .rowspan__child.rowspan__child--border > span {
  position: relative;
}
.ivu-table-cell {
  padding: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/deep/ .ivu-table-cell span {
  display: flex;
}
.ivu-table-column-center:last-child .rowspan__parent,
.ivu-table-column-center:nth-last-child(2) .rowspan__parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // top: -20px;
  position: relative;
}
.ivu-table-column-center:last-child .rowspan__parent span{
  text-align: center;
}
.ivu-table-column-center:nth-child(2) .rowspan__child> div div{
  text-align: left;
}
</style>
